تسلط بر متغیرهای محیطی CSS: ناحیه امن و انطباق ویوپورت برای ریسپانسیو بودن جهانی

در چشم‌انداز همواره در حال تحول توسعه وب، ایجاد طراحی‌های واقعاً ریسپانسیو و سازگار از اهمیت بالایی برخوردار است. وب‌سایت‌ها و اپلیکیشن‌های وب باید بتوانند به زیبایی با انبوهی از اندازه‌های صفحه، جهت‌گیری دستگاه‌ها و ویژگی‌های سخت‌افزاری منحصر به فرد سازگار شوند. متغیرهای محیطی CSS مکانیزم قدرتمندی برای دستیابی به این هدف فراهم می‌کنند و دسترسی مستقیم به اطلاعات خاص دستگاه را در استایل‌شیت‌های شما امکان‌پذیر می‌سازند. این امر اجازه می‌دهد تا تنظیمات داینامیک در چیدمان‌ها و عناصر اعمال شود و تجربه کاربری بهینه‌ای را بدون توجه به دستگاهی که برای دسترسی به محتوای شما استفاده می‌شود، تضمین کند.

این راهنمای جامع به دنیای متغیرهای محیطی CSS می‌پردازد و به طور خاص بر ناحیه امن (safe area) و انطباق ویوپورت (viewport adaptation) تمرکز دارد. ما بررسی خواهیم کرد که چگونه می‌توان از این متغیرها برای ایجاد تجربیات یکپارچه و جذاب بصری برای کاربران در سراسر جهان، با در نظر گرفتن طیف متنوع دستگاه‌ها و مشخصات صفحه نمایش رایج در مناطق مختلف، استفاده کرد.

متغیرهای محیطی CSS چه هستند؟

متغیرهای محیطی CSS، که با استفاده از تابع env() قابل دسترسی هستند، داده‌های محیطی خاص دستگاه را در اختیار استایل‌شیت‌های شما قرار می‌دهند. این داده‌ها می‌توانند شامل اطلاعاتی در مورد ابعاد صفحه نمایش دستگاه، جهت‌گیری، نواحی امن (مناطقی که تحت تأثیر حاشیه‌های دستگاه یا عناصر رابط کاربری قرار نمی‌گیرند) و موارد دیگر باشند. آنها شکاف بین سیستم عامل دستگاه و مرورگر وب را پر می‌کنند و به توسعه‌دهندگان این امکان را می‌دهند تا طراحی‌های آگاه از زمینه (context-aware) ایجاد کنند که به صورت پویا با محیط کاربر سازگار می‌شوند.

آنها را مانند متغیرهای CSS از پیش تعریف شده‌ای در نظر بگیرید که به طور خودکار توسط مرورگر بر اساس دستگاه فعلی و زمینه آن به‌روز می‌شوند. به جای کدنویسی مقادیر ثابت برای حاشیه‌ها (margins)، فاصله‌های داخلی (padding) یا اندازه‌های عناصر، می‌توانید از متغیرهای محیطی استفاده کنید تا به مرورگر اجازه دهید مقادیر بهینه را بر اساس مشخصات دستگاه تعیین کند.

مزایای کلیدی استفاده از متغیرهای محیطی CSS:

• ریسپانسیو بودن بهبود یافته: ایجاد چیدمان‌هایی که به طور یکپارچه با اندازه‌های مختلف صفحه، جهت‌گیری‌ها و ویژگی‌های دستگاه سازگار می‌شوند.
• تجربه کاربری ارتقا یافته: بهینه‌سازی رابط کاربری برای هر دستگاه، تضمین خوانایی و سهولت تعامل.
• کاهش پیچیدگی کد: حذف نیاز به راه‌حل‌های پیچیده جاوا اسکریپت برای تشخیص مشخصات دستگاه و تنظیم پویا استایل‌ها.
• قابلیت نگهداری: متمرکز کردن اطلاعات استایل‌دهی خاص دستگاه در CSS شما، که مدیریت و به‌روزرسانی کد را آسان‌تر می‌کند.
• آینده‌نگری: متغیرهای محیطی به طور خودکار با دستگاه‌ها و فناوری‌های جدید صفحه نمایش سازگار می‌شوند بدون اینکه نیاز به تغییر کد داشته باشند.

درک نواحی امن (Safe Areas)

نواحی امن مناطقی از صفحه نمایش هستند که تضمین می‌شود برای کاربر قابل مشاهده باشند و تحت تأثیر حاشیه‌های دستگاه، ناچ‌ها (notches)، گوشه‌های گرد یا عناصر رابط کاربری سیستم (مانند نوار وضعیت در iOS یا نوار ناوبری در Android) قرار نگیرند. این نواحی برای اطمینان از اینکه محتوای مهم همیشه در دسترس است و توسط ویژگی‌های سخت‌افزاری یا نرم‌افزاری پوشانده نمی‌شود، حیاتی هستند.

در دستگاه‌هایی با اشکال صفحه نمایش غیرمتعارف یا حاشیه‌های بزرگ، نادیده گرفتن نواحی امن می‌تواند منجر به بریده شدن یا پوشانده شدن محتوا توسط عناصر رابط کاربری شود که نتیجه آن یک تجربه کاربری ضعیف است. متغیرهای محیطی CSS دسترسی به تورفتگی‌های ناحیه امن (safe area insets) را فراهم می‌کنند و به شما امکان می‌دهند چیدمان خود را برای جای دادن این مناطق تنظیم کنید.

متغیرهای محیطی ناحیه امن:

• safe-area-inset-top: تورفتگی ناحیه امن بالا.
• safe-area-inset-right: تورفتگی ناحیه امن راست.
• safe-area-inset-bottom: تورفتگی ناحیه امن پایین.
• safe-area-inset-left: تورفتگی ناحیه امن چپ.

این متغیرها مقادیری را برمی‌گردانند که نشان‌دهنده فاصله (بر حسب پیکسل یا سایر واحدهای CSS) بین لبه ویوپورت و ابتدای ناحیه امن است. شما می‌توانید از این مقادیر برای افزودن padding یا margin به عناصر استفاده کنید و اطمینان حاصل کنید که آنها در محدوده قابل مشاهده صفحه باقی می‌مانند.

مثال‌های عملی استفاده از ناحیه امن:

مثال ۱: افزودن Padding به عنصر Body

این مثال نحوه افزودن padding به عنصر body را برای اطمینان از اینکه محتوا توسط حاشیه‌های دستگاه یا عناصر رابط کاربری پوشانده نمی‌شود، نشان می‌دهد.

body {
  padding-top: env(safe-area-inset-top, 0);  /* اگر متغیر پشتیبانی نشود، به طور پیش‌فرض روی 0 تنظیم می‌شود */
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
}

در این مثال، از تابع env() برای دسترسی به تورفتگی‌های ناحیه امن استفاده می‌شود. اگر دستگاهی از متغیرهای محیطی ناحیه امن پشتیبانی نکند، آرگومان دوم تابع env() (در این مورد 0) به عنوان یک مقدار جایگزین (fallback) استفاده خواهد شد و اطمینان می‌دهد که چیدمان حتی در دستگاه‌های قدیمی‌تر نیز کارآمد باقی می‌ماند.

مثال ۲: قرار دادن یک هدر ثابت در داخل ناحیه امن

این مثال نشان می‌دهد که چگونه یک هدر ثابت را در ناحیه امن قرار دهیم تا از پوشانده شدن آن توسط نوار وضعیت در دستگاه‌های iOS جلوگیری شود.

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(44px + env(safe-area-inset-top, 0));  /* تنظیم ارتفاع برای نوار وضعیت */
  padding-top: env(safe-area-inset-top, 0);  /* در نظر گرفتن padding برای نوار وضعیت */
  background-color: #fff;
  z-index: 1000;
}

در اینجا، height و padding-top هدر به صورت پویا بر اساس مقدار safe-area-inset-top تنظیم می‌شوند. این کار تضمین می‌کند که هدر همیشه قابل مشاهده است و با نوار وضعیت همپوشانی ندارد. تابع `calc()` برای افزودن تورفتگی ناحیه امن به یک ارتفاع پایه استفاده می‌شود که امکان استایل‌دهی سازگار در تمام دستگاه‌ها را فراهم می‌کند و در عین حال ارتفاع نوار وضعیت را در صورت لزوم در نظر می‌گیرد.

مثال ۳: مدیریت نوارهای ناوبری پایین صفحه

به طور مشابه، نوارهای ناوبری پایین صفحه می‌توانند با محتوا همپوشانی داشته باشند. از `safe-area-inset-bottom` استفاده کنید تا مطمئن شوید محتوا پنهان نمی‌شود. این امر به ویژه برای اپلیکیشن‌های وب موبایل اهمیت دارد.

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0); /* تنظیم برای ناوبری پایین */
  background-color: #eee;
  z-index: 1000;
}

ملاحظات جهانی برای نواحی امن:

• پراکندگی دستگاه‌ها: رواج دستگاه‌های مختلف در سراسر جهان به طور قابل توجهی متفاوت است. در حالی که آیفون‌ها با ناچ در بسیاری از کشورهای غربی رایج هستند، دستگاه‌های اندرویدی با اندازه‌های مختلف حاشیه در مناطق دیگر رواج بیشتری دارند. بنابراین، آزمایش طراحی‌های خود بر روی انواع دستگاه‌ها و اندازه‌های صفحه برای اطمینان از رفتار سازگار بسیار مهم است.
• دسترس‌پذیری: اطمینان حاصل کنید که استفاده شما از نواحی امن تأثیر منفی بر دسترس‌پذیری نداشته باشد. از استفاده از تورفتگی‌های ناحیه امن بیش از حد بزرگ که می‌تواند فضای صفحه نمایش موجود را برای کاربران با اختلالات بینایی کاهش دهد، خودداری کنید.
• بومی‌سازی: در نظر بگیرید که زبان‌ها و جهت‌های مختلف متن چگونه ممکن است بر چیدمان محتوای شما در ناحیه امن تأثیر بگذارند. به عنوان مثال، زبان‌های راست به چپ ممکن است نیاز به تنظیماتی در تورفتگی‌های افقی ناحیه امن داشته باشند.

انطباق ویوپورت با واحدهای ویوپورت

واحدهای ویوپورت واحدهای CSS هستند که نسبت به اندازه ویوپورت، یعنی ناحیه قابل مشاهده پنجره مرورگر، تعریف می‌شوند. آنها روشی انعطاف‌پذیر برای اندازه‌دهی عناصر و ایجاد چیدمان‌هایی که با اندازه‌های مختلف صفحه سازگار می‌شوند، فراهم می‌کنند. برخلاف واحدهای ثابت (مانند پیکسل)، واحدهای ویوپورت به صورت متناسب با ویوپورت مقیاس‌پذیر هستند و اطمینان می‌دهند که عناصر اندازه و موقعیت نسبی خود را در دستگاه‌های مختلف حفظ می‌کنند.

واحدهای کلیدی ویوپورت:

• vw: 1vw برابر با ۱٪ از عرض ویوپورت است.
• vh: 1vh برابر با ۱٪ از ارتفاع ویوپورت است.
• vmin: 1vmin برابر با مقدار کوچکتر از 1vw و 1vh است.
• vmax: 1vmax برابر با مقدار بزرگتر از 1vw و 1vh است.

استفاده از واحدهای ویوپورت برای چیدمان‌های ریسپانسیو:

واحدهای ویوپورت به ویژه برای ایجاد عناصر تمام‌عرض یا تمام‌ارتفاع، اندازه‌دهی متن به صورت متناسب با اندازه صفحه و حفظ نسبت‌های ابعادی مفید هستند. با استفاده از واحدهای ویوپورت، می‌توانید چیدمان‌هایی ایجاد کنید که به صورت روان با اندازه‌های مختلف صفحه سازگار می‌شوند بدون اینکه برای هر تنظیم جزئی به media query ها تکیه کنید.

مثال ۱: ایجاد یک هدر تمام‌عرض

header {
  width: 100vw; /* عرض کامل ویوپورت */
  height: 10vh; /* ۱۰٪ از ارتفاع ویوپورت */
  background-color: #333;
  color: #fff;
  text-align: center;
}

در این مثال، width هدر روی 100vw تنظیم شده است که تضمین می‌کند همیشه تمام عرض ویوپورت را، صرف‌نظر از اندازه صفحه، پوشش دهد. height روی 10vh تنظیم شده است که آن را برابر با ۱۰٪ ارتفاع ویوپورت می‌کند.

مثال ۲: اندازه‌دهی ریسپانسیو متن

h1 {
  font-size: 5vw;  /* اندازه فونت نسبت به عرض ویوپورت */
}

p {
  font-size: 2.5vw;
}

در اینجا، font-size عناصر h1 و p با استفاده از واحدهای vw تعریف شده است. این کار تضمین می‌کند که متن به صورت متناسب با عرض ویوپورت مقیاس‌پذیر باشد و خوانایی را در اندازه‌های مختلف صفحه حفظ کند. عرض‌های کوچکتر ویوپورت منجر به متن کوچکتر و عرض‌های بزرگتر ویوپورت منجر به متن بزرگتر خواهد شد.

مثال ۳: حفظ نسبت ابعادی با ترفند Padding

برای حفظ نسبت ابعادی ثابت برای عناصر، به ویژه تصاویر یا ویدئوها، می‌توانید از «ترفند padding» در ترکیب با واحدهای ویوپورت استفاده کنید. این تکنیک شامل تنظیم ویژگی padding-bottom یک عنصر به عنوان درصدی از عرض آن است که به طور موثر فضایی را برای عنصر بر اساس نسبت ابعادی مورد نظر رزرو می‌کند.

.aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* نسبت ابعادی ۱۶:۹ (9 / 16 * 100) */
  height: 0;
}

.aspect-ratio-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

در این مثال، padding-bottom کلاس .aspect-ratio-container روی 56.25% تنظیم شده است که با نسبت ابعادی ۱۶:۹ مطابقت دارد. سپس iframe (یا هر عنصر محتوای دیگر) به صورت absolutely positioned در داخل کانتینر قرار می‌گیرد و فضای موجود را پر می‌کند در حالی که نسبت ابعادی مورد نظر را حفظ می‌کند. این برای جاسازی ویدئوها از پلتفرم‌هایی مانند YouTube یا Vimeo بسیار مفید است و تضمین می‌کند که آنها در تمام اندازه‌های صفحه به درستی نمایش داده می‌شوند.

محدودیت‌های واحدهای ویوپورت:

در حالی که واحدهای ویوپورت قدرتمند هستند، محدودیت‌هایی نیز دارند:

• نمایان شدن کیبورد در موبایل: در دستگاه‌های تلفن همراه، ارتفاع ویوپورت ممکن است هنگام نمایش کیبورد تغییر کند، که اگر به شدت به واحدهای vh تکیه کنید، می‌تواند باعث تغییرات غیرمنتظره در چیدمان شود. استفاده از جاوا اسکریپت برای تشخیص نمایان شدن کیبورد و تنظیم چیدمان خود را در نظر بگیرید.
• سازگاری مرورگر: در حالی که واحدهای ویوپورت به طور گسترده پشتیبانی می‌شوند، مرورگرهای قدیمی‌تر ممکن است پشتیبانی محدودی داشته باشند یا اصلاً پشتیبانی نکنند. مقادیر جایگزین با استفاده از واحدهای ثابت یا media query ها برای اطمینان از سازگاری با مرورگرهای قدیمی‌تر فراهم کنید.
• عناصر بزرگتر از اندازه: اگر محتوای داخل عنصری که با واحدهای ویوپورت اندازه‌دهی شده است از فضای موجود بیشتر شود، ممکن است سرریز (overflow) کند و منجر به مشکلات چیدمان شود. از ویژگی‌های CSS مانند overflow: auto یا overflow: scroll برای مدیریت سرریز به شیوه‌ای مناسب استفاده کنید.

واحدهای ویوپورت پویا: svh, lvh, dvh

مرورگرهای مدرن سه واحد ویوپورت اضافی را معرفی می‌کنند که با مشکل تأثیر عناصر رابط کاربری مرورگر بر اندازه ویوپورت، به ویژه در موبایل، مقابله می‌کنند:

• svh (ارتفاع ویوپورت کوچک): نشان‌دهنده کوچکترین ارتفاع ممکن ویوپورت است. این اندازه ویوپورت حتی زمانی که عناصر رابط کاربری مرورگر، مانند نوار آدرس در موبایل، وجود دارند، ثابت می‌ماند.
• lvh (ارتفاع ویوپورت بزرگ): نشان‌دهنده بزرگترین ارتفاع ممکن ویوپورت است. این اندازه ویوپورت ممکن است شامل ناحیه‌ای باشد که پشت رابط کاربری موقتاً قابل مشاهده مرورگر قرار دارد.
• dvh (ارتفاع ویوپورت پویا): نشان‌دهنده ارتفاع فعلی ویوپورت است. این شبیه به `vh` است، اما هنگامی که عناصر رابط کاربری مرورگر ظاهر یا ناپدید می‌شوند، به‌روز می‌شود.

این واحدها برای ایجاد چیدمان‌ها و تجربیات تمام‌صفحه در دستگاه‌های تلفن همراه بسیار مفید هستند، زیرا اندازه‌گیری‌های ارتفاع ویوپورت سازگارتر و قابل اعتمادتری را ارائه می‌دهند. هنگامی که رابط کاربری مرورگر ظاهر یا ناپدید می‌شود، `dvh` تغییر می‌کند و در صورت لزوم، تنظیمات چیدمان را فعال می‌کند.

مثال: استفاده از dvh برای چیدمان‌های تمام‌صفحه موبایل:

.full-screen-section {
  height: 100dvh;
  width: 100vw;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

این مثال یک بخش تمام‌صفحه ایجاد می‌کند که همیشه کل ناحیه قابل مشاهده صفحه را اشغال می‌کند و با حضور یا عدم حضور رابط کاربری مرورگر در دستگاه‌های تلفن همراه سازگار می‌شود. این کار از پوشانده شدن محتوا توسط نوار آدرس یا عناصر دیگر جلوگیری می‌کند.

ترکیب ناحیه امن و واحدهای ویوپورت برای ریسپانسیو بودن بهینه

قدرت واقعی در ترکیب تورفتگی‌های ناحیه امن با واحدهای ویوپورت نهفته است. این رویکرد به شما امکان می‌دهد چیدمان‌هایی ایجاد کنید که هم ریسپانسیو و هم آگاه به ویژگی‌های خاص دستگاه باشند و تجربه کاربری بهینه‌ای را در طیف گسترده‌ای از دستگاه‌ها تضمین کنند.

مثال: ایجاد یک نوار ناوبری سازگار با موبایل با پشتیبانی از ناحیه امن

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(10vh + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh; /* ارتفاع باقیمانده پس از در نظر گرفتن ناحیه امن */
  padding: 0 16px;
}

در این مثال، عنصر nav از هر دو vw و env() برای ایجاد یک نوار ناوبری ریسپانسیو استفاده می‌کند که ناحیه امن را در نظر می‌گیرد. عرض روی 100vw تنظیم شده تا اطمینان حاصل شود که تمام عرض ویوپورت را پوشش می‌دهد. ارتفاع و padding-top به صورت پویا بر اساس مقدار safe-area-inset-top تنظیم می‌شوند تا اطمینان حاصل شود که نوار ناوبری توسط نوار وضعیت پوشانده نمی‌شود. کلاس .nav-content تضمین می‌کند که محتوای داخل نوار ناوبری در مرکز و قابل مشاهده باقی بماند.

بهترین شیوه‌ها برای استفاده از متغیرهای محیطی CSS

• فراهم کردن مقادیر جایگزین: همیشه مقادیر جایگزین (fallback) برای متغیرهای محیطی با استفاده از آرگومان دوم تابع env() فراهم کنید. این کار تضمین می‌کند که چیدمان شما در دستگاه‌هایی که از این متغیرها پشتیبانی نمی‌کنند، کارآمد باقی بماند.
• تست کامل: طراحی‌های خود را بر روی انواع دستگاه‌ها و اندازه‌های صفحه آزمایش کنید تا از رفتار سازگار اطمینان حاصل شود. از شبیه‌سازهای دستگاه یا دستگاه‌های واقعی برای آزمایش استفاده کنید.
• استفاده هوشمندانه از Media Queries: در حالی که متغیرهای محیطی می‌توانند نیاز به media query ها را کاهش دهند، نباید به طور کامل جایگزین آنها شوند. از media query ها برای مدیریت تغییرات عمده در چیدمان یا تنظیمات استایل‌دهی خاص دستگاه استفاده کنید.
• در نظر گرفتن دسترس‌پذیری: اطمینان حاصل کنید که استفاده شما از متغیرهای محیطی تأثیر منفی بر دسترس‌پذیری نداشته باشد. از نسبت‌های کنتراست کافی استفاده کنید و محتوای جایگزین برای کاربران دارای معلولیت فراهم کنید.
• مستندسازی کد خود: استفاده از متغیرهای محیطی را در کد CSS خود به وضوح مستند کنید تا درک و نگهداری آن آسان‌تر شود.
• به‌روز بمانید: از آخرین تحولات در متغیرهای محیطی CSS و واحدهای ویوپورت آگاه باشید. با تکامل پلتفرم وب، ویژگی‌ها و بهترین شیوه‌های جدیدی ظهور خواهند کرد.

سازگاری مرورگر و مقادیر جایگزین

در حالی که متغیرهای محیطی CSS و واحدهای ویوپورت به طور گسترده توسط مرورگرهای مدرن پشتیبانی می‌شوند، در نظر گرفتن سازگاری مرورگر، به ویژه هنگام هدف قرار دادن مخاطبان جهانی، بسیار مهم است. مرورگرهای قدیمی‌تر ممکن است به طور کامل از این ویژگی‌ها پشتیبانی نکنند، که شما را ملزم می‌کند تا مقادیر جایگزین مناسبی برای اطمینان از تجربه کاربری سازگار فراهم کنید.

استراتژی‌هایی برای مدیریت سازگاری مرورگر:

• مقادیر جایگزین در env(): همانطور که قبلاً ذکر شد، همیشه آرگومان دومی را برای تابع env() به عنوان مقدار جایگزین برای مرورگرهایی که از متغیرهای محیطی پشتیبانی نمی‌کنند، فراهم کنید.
• Media Queries: از media query ها برای هدف قرار دادن اندازه‌های صفحه یا مشخصات دستگاه خاص و اعمال استایل‌های جایگزین برای مرورگرهای قدیمی‌تر استفاده کنید.
• CSS Feature Queries (@supports): از CSS feature query ها برای تشخیص پشتیبانی از ویژگی‌های خاص CSS، از جمله متغیرهای محیطی، استفاده کنید. این به شما امکان می‌دهد تا به صورت شرطی استایل‌ها را بر اساس پشتیبانی مرورگر اعمال کنید.

مثال: استفاده از CSS Feature Queries برای پشتیبانی از متغیرهای محیطی:

@supports (safe-area-inset-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
  }
}

@supports not (safe-area-inset-top: env(safe-area-inset-top)) {
  /* استایل‌های جایگزین برای مرورگرهایی که از تورفتگی‌های ناحیه امن پشتیبانی نمی‌کنند */
  body {
    padding: 16px; /* از یک مقدار padding پیش‌فرض استفاده کنید */
  }
}

این مثال از قاعده @supports برای بررسی اینکه آیا مرورگر از متغیر محیطی safe-area-inset-top پشتیبانی می‌کند، استفاده می‌کند. اگر پشتیبانی کند، padding با استفاده از متغیرهای محیطی اعمال می‌شود. در غیر این صورت، یک مقدار padding پیش‌فرض به جای آن اعمال می‌شود.

نتیجه‌گیری: پذیرش طراحی وب سازگار برای مخاطبان جهانی

متغیرهای محیطی CSS و واحدهای ویوپورت ابزارهای ضروری برای ایجاد طراحی‌های وب واقعاً ریسپانسیو و سازگار هستند که به مخاطبان جهانی پاسخ می‌دهند. با درک نحوه استفاده از این ویژگی‌ها، می‌توانید تجربیات یکپارچه و جذاب بصری برای کاربران در طیف گسترده‌ای از دستگاه‌ها، اندازه‌های صفحه و سیستم‌عامل‌ها ایجاد کنید.

با پذیرش این تکنیک‌ها، می‌توانید اطمینان حاصل کنید که وب‌سایت‌ها و اپلیکیشن‌های وب شما برای کاربران در سراسر جهان، صرف‌نظر از دستگاهی که برای دسترسی به محتوای شما استفاده می‌کنند، در دسترس و لذت‌بخش هستند. نکته کلیدی این است که به طور کامل تست کنید، برای مرورگرهای قدیمی‌تر مقادیر جایگزین فراهم کنید و با آخرین تحولات در استانداردهای توسعه وب به‌روز بمانید. آینده طراحی وب سازگار است و متغیرهای محیطی CSS در خط مقدم این تکامل قرار دارند.

منابع بیشتر

• مستندات وب MDN: env()
• مستندات وب MDN: مقادیر و واحدهای CSS
• طراحی وب‌سایت‌ها برای آیفون X (وبلاگ WebKit)